<template>
    <yk-space class="gather">
        <div v-for="(item, index) in overData" :key="index" class="gather-list" :style="{background: 'linear-gradient('+ item.bgColor +')'}">
            <yk-space dir="vertical" size="s">
                <yk-text type="vertical">{{ item.name }}</yk-text>
                <yk-title :level="2" style="margin: 0;">{{ item.total }}</yk-title>
            </yk-space>
            <yk-button v-if="index > 0" size="xl" type="secondary" shape="square">
                <IconPlusOutline />
            </yk-button>
        </div>
    </yk-space>
</template>

<script setup lang="ts">
import { overLink } from "../../utils/menu";
import { overviewData } from "../../mock/data";
import { onMounted, ref } from "vue";

const overData = ref(overLink);

const getOverViewData = () =>{
    const res = overviewData.data;
    //判断overData中的data是否与res中的键名是否一致，一致则把res的值赋给overData中的total
    const resMap = new Map<string, number>(Object.entries(res));
    overData.value.forEach(item => {
        if (resMap.has(item.dataId)) {
            item.total = resMap.get(item.dataId)!;
        }
    });
}
onMounted(() => {
    getOverViewData()
})


</script>

<style lang="less" scoped>
.gather{
    width: 100%;
    &-list{
        width: 25%;
        background: #eee;
        padding: @space-xl;
        display: flex;
        justify-content: space-between;
        border-radius: @radius-m;
        align-items: center;
        &:first-child{
            .yk-title,.yk-text{
                color: @white;
            }
        }
    }
}
</style>